<template>
  <div class="home">
    <div class="set-div">
      BY 王佳伟 最后更新时间：2022年5月14日15:29:05
      <el-button type="primary" @click="add()" size="mini">添加布局</el-button>
      <el-button type="primary" @click="save()" size="mini" style="margin-left: 30px;">保存布局</el-button>
      {{percent?'百分比':'像素值'}}
      <button @click="percent = !percent">{{percent?'切换像素值':'切换百分比'}}</button>
    </div>
    <div class="content-div" ref="content">
      <layer-dom v-for="(item, index) in layerList" :layoutData="item" @changeFinish="changeFinish($event,index)"
        @delLayout="delLayout($event,index)" :key="item.id" :percent="percent"></layer-dom>
    </div>
  </div>
</template>

<script>
  import layerDom from '@/components/layerDom'

  export default {

    name: "Home",

    components: {
      layerDom,
    },

    data() {
      return {
        layerList: [],
        percent: false,
      }
    },

    mounted() {
      this.init()
    },

    methods: {

      // 初始化
      init() {
        let layout = JSON.parse(localStorage.getItem('wjw-layout'))
        if (layout) {
          this.layerList = layout
        }
      },

      // 添加布局
      add() {
        this.layerList.push({
          id: new Date().getTime(),
          width: 300,
          height: 250,
          widthPercent: 20,
          heightPercent: 20,
          top: 0,
          left: 0,
          topPercent: 0,
          leftPercent: 0,
          config: {
            title: {
              name: '默认标题',
              fontSize: 12,
              fontWeight: 600,
              color: 'rgba(9, 252, 228, 0.88)',
              top: 3,
              left: 40,
            },
            echarts: {
              type: 'null'
            },
          }
        })
      },

      // 保存布局
      save() {
        localStorage.setItem('wjw-layout', JSON.stringify(this.layerList))
        this.$message.success('布局保存成功')
      },

      // 布局改变
      changeFinish(data, index) {
        this.layerList[index] = data
      },

      // 布局删除
      delLayout(data, index) {
        this.layerList.splice(index, 1)
      },

    },
  };
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
    background-color: aqua;
  }

  .set-div {
    height: 50px;
    background-color: antiquewhite;
  }

  .content-div {
    height: calc(100% - 50px);
    background-color: aquamarine;
    position: relative;
    overflow: hidden;
  }
</style>